{{Extend "layout"}}
{{Block "title"}}{{"离线下载"|T}}{{/Block}}
{{Block "breadcrumb"}}
{{Super}}
<li class="active">{{"离线下载"|T}}</li>
{{/Block}}
{{Block "main"}}
<div class="row">
				<div class="col-md-12">
					<div class="block-flat">
						<div class="header">							
							<h3>{{"离线下载"|T}}</h3>
						</div>
						<div class="content">
							
								<div class="btn-group">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									{{"Task"|T}} <span class="caret"></span>
								  </button>
								  <ul class="dropdown-menu" role="menu">
									<li>
										<a href="###" data-toggle="modal" data-target="#myModal">{{"Add download"|T}}</a>
									</li>
									<li onclick="RemoveDownload()">
										<a href="###">{{"Delete download"|T}}</a>
									</li>
								  </ul>
								</div>
								
								<div class="btn-group">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									{{"Action"|T}} <span class="caret"></span>
								  </button>
								  <ul class="dropdown-menu" role="menu">
										<li onclick="StartDownload()">
											<a href="###">{{"Start"|T}}</a>
										</li>
										<li onclick="StopDownload()">
											<a href="###">{{"Stop"|T}}</a>
										</li>
										<li class="divider"></li>
										<li onclick="StartAllDownload()">
											<a href="###">{{"Start all"|T}}</a>
										</li>
										<li onclick="StopAllDownload()">
											<a href="###">{{"Stop all"|T}}</a>
										</li>
								  </ul>
								</div>
							<div class="table-responsive">
							<table class="table no-border hover" id="fileTable">
								<thead class="no-border">
									<tr>
				<th width="30"><input type="checkbox" class="allCheck" value="-1"></th>
				<th width="30">#</th>
				<th width="150">{{"File Name"|T}}</th>
				<th width="100" class="hidden-xs">{{"Size"|T}}</th>
				<th width="100" class="hidden-xs">{{"Downloaded"|T}}</th>
				<th width="40" class="hidden-xs">%</th>
				<th width="100" class="hidden-xs">{{"Speed"|T}}</th>
				<th>{{"Progress"|T}}</th>
									</tr>
								</thead>
								<tbody class="no-border-y" id="fileList">
								</tbody>
							</table>		
							</div>
						</div>
					</div>				
				</div>
			</div>


<script type="text/template" id="tr-template">
<tr>
<td id="chk-{Id}"><input type="checkbox" class="idCheck" value="{Id}"></td>
<td id="id-{Id}">{Id}</td>
<td id="name-{Id}">{FileName}</td>
<td id="size-{Id}" class="hidden-xs">{Size}</td>
<td id="downed-{Id}" class="hidden-xs">{Downloaded}</td>
<td id="percent-{Id}" class="hidden-xs">{Percent}</th>
<td id="speed-{Id}" class="hidden-xs">{Speed}</td>
<td id="progress-{Id}">{Progress}</td>
</tr>
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
	<div class="modal-dialog">
		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">{{"Enter Url"|T}}</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label class="control-label">{{"Url"|T}}:</label>
					<div class="controls">
						<input type="text" onchange="OnChangeUrl()" id="url_id" class="form-control" value="https://sciter.com/sdk/sciter-sdk.zip">
					</div>
					<label class="control-label">{{"Save path"|T}}:</label>
					<div class="controls">
						<input type="text" id="save_path_id" class="form-control" value="sciter-sdk.zip">
					</div>
					<label class="control-label">{{"Parts count"|T}}:</label>
					<select class="form-control" id="part_count_id">
						<option>1</option>
						<option>2</option>
						<option>4</option>
						<option>8</option>
						<option>16</option>
					</select>
					<div class="modal-footer">
						<a class="btn btn-primary" onclick="AddDownload()" data-dismiss="modal">
							<i class="glyphicon glyphicon-plus"></i>
							{{"Add"|T}}
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{/Block}}

{{Block "footer"}}
<script type="text/javascript">
var tableHead={fileName:'{{"File Name"|T}}',size:'{{"Size"|T}}',downloaded:'{{"Downloaded"|T}}',speed:'{{"Speed"|T}}',progress:'{{"Progress"|T}}'};
var states={Completed:'{{"Completed"|T}}',Running:'{{"Running"|T}}',Stopped:'{{"Stopped"|T}}',Failed:'{{"Failed"|T}}'};
</script>
<script type="text/javascript" src="__ASSETS__/js/sockjs.min.js"></script>
<script type="text/javascript" src="__ASSETS__/js/behaviour/download.js"></script>
{{if Form "_pjax"}}
<script type="text/javascript">
App.loading('hide');
sockJSRead();
</script>
{{end}}
{{/Block}}